<template>
  <div class="tree">
    <el-tree
      :data="data"
      :props="defaultProps"
      accordion
      @node-click="handleNodeClick"
      highlight-current
      node-key="code"
      :current-node-key="currentNodeKey"
    />
  </div>
</template>
<script setup>
import { subjectConfigsApi } from '@/modules/rankings/api.js';
import { nextTick } from 'vue';
import bus from '@/utils/bus.js';
const { parentFun, currentNodeKey } = defineProps({
  parentFun: {
    type: Function,
  },
  currentNodeKey: {
    type: String,
  },
});
//获取学科树
const data = ref([]);
const defaultProps = {
  children: 'majors',
  label: 'name',
};
const getSubjectConfigs = () => {
  subjectConfigsApi().then((res) => {
    res.data.subjectConfigs.forEach((e) => {
      e.name = e.type;
    });
    data.value = res.data.subjectConfigs;
    bus.emit('getSubjectConfigs', res.data.subjectConfigs);
    nextTick(() => {
      document.querySelector('.el-tree .el-tree-node__content').click(); //默认选中第一个大菜单
      nextTick(() => {
        document
          .querySelector(
            '.el-tree .el-tree-node__children .el-tree-node__content'
          )
          .click(); //默认选中第一个大菜单下的第一个
      });
    });
  });
};
const handleNodeClick = (data) => {
  if (data.code) {
    parentFun(data.code);
  }
};
getSubjectConfigs();
</script>
<style lang="scss" scoped>
.tree {
  width: 326px;
  background: #fafafa;
  padding: 20px;
}
</style>
